import React,{Component} from 'react'
import {navs} from '../../data/proList'
import animate from '../../js/animate'
import {NavLink} from 'react-router-dom'
export default class Active extends Component{
    constructor(props){
        super(props)
        this.state={
            list1:[],
            list2:[],
            name:'',
            op:1,
            id:''
        }
    }

    componentWillReceiveProps(a){
        if(typeof a.name == 'number'){
            let arr1 = navs[a.name].data.slice(0,4)
            let arr2 = navs[a.name].data.slice(4)
            let str = navs[a.name].engName
            this.setState({
                list1:arr1,
                list2:arr2,
                name:str,
                id:navs[a.name].id
            })
        }
        let el = this.refs.box
        
        if(a.sty==1){
            let op = 1
            clearInterval(el.timer)
            el.timer = setInterval(function(){
                op-=0.09
                el.style['opacity'] = op
                if(op<=0){
                    el.style['display'] = 'none'
                    clearInterval(el.timer)
                }
                el.onmouseenter=()=>{
                    clearInterval(el.timer)
                    el.style['display'] = 'block'
                    el.style['opacity'] = 1
                }
            },30)
            el.onmouseleave=(e)=>{
                console.log(e.offsetY)
                if(e.offsetY<=1){
                    el.style['display'] = 'block'
                    el.style['opacity'] = 1
                }else{
                     animate(el,1,30)
                }
               
            }
        }else{
            animate(el,a.sty,30)
        }
    }
    render(){
        console.log(this.state.list1)
        var height = this.props.top
        return(
            <div style={{display:'none',top:height}} ref="box" className="secondNav">
                <h2>{this.state.name}</h2>
                <div className="foot">
                    <ul>
                        {
                            this.state.list1.map((v,i)=>{
                                return(
                                    <li key={i}><NavLink style={{color:'#fff'}} to={{
                                        pathname: '/proList/'+this.state.id,
                                        search: '?cateId='+i,
                                    }}>{v.name}</NavLink></li>
                                )
                            })
                        }
                    </ul>
                    <ul>
                        {
                            this.state.list2.map((v,i)=>{
                                return(
                                    <li key={i}><NavLink style={{color:'#fff'}} to={{
                                        pathname: '/proList/'+this.state.id,
                                        search: '?cateId='+v.cateId,
                                    }}>{v.name}</NavLink></li>
                                )
                            })
                        }
                    </ul>
                </div>
            </div>
        )
    }
}